<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
<template>
  <div>
    <el-row>
      <el-col :span="4" align="left" style="line-height: 36px;height: 36px">
        <span style="font-size: 14px;color: #747778">融资情况信息</span>
      </el-col>
    </el-row>
    <el-row style="justify-content: center">
      <el-button @click="addRow()"
                 style="margin: 8px 0px 8px 0px;padding: 6.2px 7px;font-size: 13px;line-height: 18px"
                 v-show="showAddButton && editable" round>
        <i class="joys-icon-new" style="margin-right: 12px;margin-left: 4px"/>
        <span style="margin: 0px">添加融资信息</span>
      </el-button>
      <el-button type="primary"
                 @click="addRow()"
                 style="padding: 0px 18px 0px 8px;line-height: 36px;margin: 12px 0px"
                 v-show="!showAddButton && !showForm && editable" round>
        <i class="joys-icon-addagain" style="margin-right: 18px;"/>
        <span style="margin: 0px;display: inline-block;font-size: 14px;">继续添加</span>
      </el-button>
      <span v-if="BankCreditData.length === 0 && BondData.length === 0 && TrustData.length === 0
                  && FinLeaseData.length === 0 && EntLoansData.length === 0 && BankFinancingData.length === 0
                  && OtherData.length === 0 && !editable">没有数据</span>
    </el-row>

    <transition name="el-zoom-in-top">
      <el-tabs v-model="tabName" @tab-click="handleClick" v-if="!showForm">
        <el-tab-pane label="银行授信" v-if="BankCreditData.length>0" name="first">
          <el-table :data="BankCreditData"
                    tooltip-effect="light"
                    style="width: 100%;">
            <el-table-column prop="companyAgency" label="金融机构" min-width="120" show-overflow-tooltip align="left">
              <template slot-scope="scope">
                <ft-link-text @click="handleCard(scope.$index,scope.row)"
                              :text="scope.row.companyAgency">
                </ft-link-text>
              </template>
            </el-table-column>

            <el-table-column prop="options.financingAmount" label="授信总额" min-width="120" align="left">
              <template slot-scope="scope">
                <ft-number-input :editable="false" v-model="scope.row.options.financingAmount"
                                 :precision='[16,2]'></ft-number-input>
              </template>
            </el-table-column>

            <el-table-column prop="options.incurredAmount" label="已出账金额" min-width="120" align="right">
              <template slot-scope="scope">
                <ft-number-input :editable="false" v-model="scope.row.options.incurredAmount"
                                 :precision='[16,2]'></ft-number-input>
              </template>
            </el-table-column>

            <el-table-column prop="options.financingYears" label="期限" min-width="120" align="left"/>

            <el-table-column prop="options.guaranteeType" label="担保方式" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column prop="options.classification" label="分类等级" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column v-if="editable" label="操作" align="center" min-width="120">
              <template slot-scope="scope">
                <el-button type="text"
                           size="small"
                           @click="handleEdit(scope.$index,scope.row)">编辑
                </el-button>
                <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
                  <p>确认要删除该数据吗? 删除后无法恢复！</p>
                  <div style="text-align:right; margin:0">
                    <el-button size="small"
                               @click="scope.row.delVisible=false">取消
                    </el-button>
                    <el-button type="primary" size="small" @click="handleDelete(scope.row,scope.$index)">确定</el-button>
                  </div>
                  <span slot="reference" style="margin-left:.10rem">
              <el-button type="text" size="small" style="color:#B94A48">删除
              </el-button>
            </span>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="未到期债券" v-if="BondData.length>0" name="second">
          <el-table :data="BondData"
                    tooltip-effect="light"
                    style="width: 100%;">
            <el-table-column prop="companyAgency" label="券名" min-width="120" show-overflow-tooltip align="left">
              <template slot-scope="scope">
                <ft-link-text @click="handleCard(scope.$index,scope.row)"
                              :text="scope.row.companyAgency">
                </ft-link-text>
              </template>
            </el-table-column>

            <el-table-column prop="options.otherType" label="主体评级" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column prop="options.financingAmount" label="发行额" min-width="120" align="right">
              <template slot-scope="scope">
                <ft-number-input :editable="false" v-model="scope.row.options.financingAmount"
                                 :precision='[16,2]'></ft-number-input>
              </template>
            </el-table-column>

            <el-table-column prop="startDate" label="起息日" min-width="120" align="left"/>

            <el-table-column prop="endDate" label="到期日" min-width="120" align="left"/>

            <el-table-column prop="options.things" label="主承销商" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column v-if="editable" label="操作" align="center" min-width="120">
              <template slot-scope="scope">
                <el-button type="text"
                           size="small"
                           @click="handleEdit(scope.$index,scope.row)">编辑
                </el-button>
                <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
                  <p>数据删除后，将不能恢复，确认删除？</p>
                  <div style="text-align:right; margin:0">
                    <el-button size="small"
                               @click="scope.row.delVisible=false">取消
                    </el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">确定</el-button>
                  </div>
                  <span slot="reference" style="margin-left:.10rem">
              <el-button type="text" size="small" style="color:#B94A48">删除
              </el-button>
            </span>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="信托融资" v-if="TrustData.length>0" name="third">
          <el-table :data="TrustData"
                    tooltip-effect="light"
                    style="width: 100%;">
            <el-table-column prop="companyAgency" label="信托公司" min-width="120" align="left" show-overflow-tooltip>
              <template slot-scope="scope">
                <ft-link-text @click="handleCard(scope.$index,scope.row)"
                              :text="scope.row.companyAgency">
                </ft-link-text>
              </template>
            </el-table-column>

            <el-table-column prop="options.normal" label="入股与否" min-width="120" align="left"/>

            <el-table-column prop="options.financingAmount" label="金额" min-width="120" align="right">
              <template slot-scope="scope">
                <ft-number-input :editable="false" v-model="scope.row.options.financingAmount"
                                 :precision='[16,2]'></ft-number-input>
              </template>
            </el-table-column>

            <el-table-column prop="startDate" label="起息日" min-width="120" align="left"/>

            <el-table-column prop="endDate" label="到期日" min-width="120" align="left"/>

            <el-table-column prop="options.stock" label="股权质押情况" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column v-if="editable" label="操作" align="center" min-width="120">
              <template slot-scope="scope">
                <el-button type="text"
                           size="small"
                           @click="handleEdit(scope.$index,scope.row)">编辑
                </el-button>
                <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
                  <p>确认要删除该数据吗? 删除后无法恢复！</p>
                  <div style="text-align:right; margin:0">
                    <el-button size="small"
                               @click="scope.row.delVisible=false">取消
                    </el-button>
                    <el-button type="primary" size="small" @click="handleDelete(scope.row,scope.$index)">确定</el-button>
                  </div>
                  <span slot="reference" style="margin-left:.10rem">
              <el-button type="text" size="small" style="color:#B94A48">删除
              </el-button>
            </span>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="融资租赁" v-if="FinLeaseData.length>0" name="fourth">
          <el-table :data="FinLeaseData"
                    tooltip-effect="light"
                    style="width: 100%;">
            <el-table-column prop="companyAgency" label="租赁公司" min-width="120" show-overflow-tooltip align="left">
              <template slot-scope="scope">
                <ft-link-text @click="handleCard(scope.$index,scope.row)"
                              :text="scope.row.companyAgency">
                </ft-link-text>
              </template>
            </el-table-column>

            <el-table-column prop="options.otherType" label="租赁类型" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column prop="options.financingAmount" label="金额" min-width="120" align="right">
              <template slot-scope="scope">
                <ft-number-input :editable="false" v-model="scope.row.options.financingAmount"
                                 :precision='[16,2]'></ft-number-input>
              </template>
            </el-table-column>

            <el-table-column prop="startDate" label="起息日" min-width="120" align="left"/>

            <el-table-column prop="endDate" label="到期日" min-width="120" align="left"/>

            <el-table-column prop="options.leaseThing" label="租赁物" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column v-if="editable" label="操作" align="center" min-width="120">
              <template slot-scope="scope">
                <el-button type="text"
                           size="small"
                           @click="handleEdit(scope.$index,scope.row)">编辑
                </el-button>
                <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
                  <p>确认要删除该数据吗? 删除后无法恢复！</p>
                  <div style="text-align:right; margin:0">
                    <el-button size="small"
                               @click="scope.row.delVisible=false">取消
                    </el-button>
                    <el-button type="primary" size="small" @click="handleDelete(scope.row,scope.$index)">确定</el-button>
                  </div>
                  <span slot="reference" style="margin-left:.10rem">
              <el-button type="text" size="small" style="color:#B94A48">删除</el-button>
            </span>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="委托贷款" v-if="EntLoansData.length>0" name="fifth">
          <el-table :data="EntLoansData"
                    tooltip-effect="light"
                    style="width: 100%;">
            <el-table-column prop="companyAgency" label="委托人" min-width="120" show-overflow-tooltip align="left">
              <template slot-scope="scope">
                <ft-link-text @click="handleCard(scope.$index,scope.row)"
                              :text="scope.row.companyAgency">
                </ft-link-text>
              </template>
            </el-table-column>

            <el-table-column prop="options.things" label="受托人" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column prop="options.financingAmount" label="金额" min-width="120" align="right">
              <template slot-scope="scope">
                <ft-number-input :editable="false" v-model="scope.row.options.financingAmount"
                                 :precision='[16,2]'></ft-number-input>
              </template>
            </el-table-column>

            <el-table-column prop="startDate" label="起息日" min-width="120" align="left"/>

            <el-table-column prop="endDate" label="到期日" min-width="120" align="left"/>

            <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column v-if="editable" label="操作" align="center" min-width="120">
              <template slot-scope="scope">
                <el-button type="text"
                           size="small"
                           @click="handleEdit(scope.$index,scope.row)">编辑
                </el-button>
                <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
                  <p>确认要删除该数据吗? 删除后无法恢复！</p>
                  <div style="text-align:right; margin:0">
                    <el-button size="small"
                               @click="scope.row.delVisible=false">取消
                    </el-button>
                    <el-button type="primary" size="small" @click="handleDelete(scope.row,scope.$index)">确定</el-button>
                  </div>
                  <span slot="reference" style="margin-left:.10rem">
              <el-button type="text" size="small" style="color:#B94A48">删除
              </el-button>
            </span>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="银行理财融资" v-if="BankFinancingData.length>0" name="sixth">
          <el-table :data="BankFinancingData"
                    tooltip-effect="light"
                    style="width: 100%;">
            <el-table-column prop="companyAgency" label="理财计划发行银行" min-width="120" show-overflow-tooltip align="left">
              <template slot-scope="scope">
                <ft-link-text @click="handleCard(scope.$index,scope.row)"
                              :text="scope.row.companyAgency">
                </ft-link-text>
              </template>
            </el-table-column>

            <el-table-column prop="options.otherType" label="理财类型" min-width="120" align="left">
              <template slot-scope="scope">
                <ft-enum-select v-model="scope.row.options.otherType"
                                service-name="lss-customer"
                                type-name="financialType"
                                :editing="false"
                ></ft-enum-select>
              </template>
            </el-table-column>

            <el-table-column prop="options.financingAmount" label="金额" min-width="120" align="right">
              <template slot-scope="scope">
                <ft-number-input :editable="false" v-model="scope.row.options.financingAmount"
                                 :precision='[16,2]'></ft-number-input>
              </template>
            </el-table-column>

            <el-table-column prop="startDate" label="起息日" min-width="120" align="left"/>

            <el-table-column prop="endDate" label="到期日" min-width="120" align="left"/>

            <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column v-if="editable" label="操作" align="center" min-width="120">
              <template slot-scope="scope">
                <el-button type="text"
                           size="small"
                           @click="handleEdit(scope.$index,scope.row)">编辑
                </el-button>
                <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
                  <p>确认要删除该数据吗? 删除后无法恢复！</p>
                  <div style="text-align:right; margin:0">
                    <el-button size="small"
                               @click="scope.row.delVisible=false">取消
                    </el-button>
                    <el-button type="primary" size="small" @click="handleDelete(scope.row,scope.$index)">确定</el-button>
                  </div>
                  <span slot="reference" style="margin-left:.10rem">
              <el-button type="text" size="small" style="color:#B94A48">删除
              </el-button>
            </span>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="其他融资方式" v-if="OtherData.length>0" name="seventh">
          <el-table :data="OtherData"
                    tooltip-effect="light"
                    style="width: 100%;">
            <el-table-column prop="companyAgency" label="融资提供方" min-width="120" show-overflow-tooltip align="left">
              <template slot-scope="scope">
                <ft-link-text @click="handleCard(scope.$index,scope.row)"
                              :text="scope.row.companyAgency">
                </ft-link-text>
              </template>
            </el-table-column>

            <el-table-column prop="options.otherType" label="具体模式" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column prop="options.financingAmount" label="金额" min-width="120" align="right">
              <template slot-scope="scope">
                <ft-number-input :editable="false" v-model="scope.row.options.financingAmount"
                                 :precision='[16,2]'></ft-number-input>
              </template>
            </el-table-column>

            <el-table-column prop="startDate" label="起息日" min-width="120" align="left"/>

            <el-table-column prop="endDate" label="到期日" min-width="120" align="left"/>

            <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip align="left"></el-table-column>

            <el-table-column v-if="editable" label="操作" align="center" min-width="120">
              <template slot-scope="scope">
                <el-button type="text"
                           size="small"
                           @click="handleEdit(scope.$index,scope.row)">编辑
                </el-button>
                <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
                  <p>确认要删除该数据吗? 删除后无法恢复！</p>
                  <div style="text-align:right; margin:0">
                    <el-button size="small"
                               @click="scope.row.delVisible=false">取消
                    </el-button>
                    <el-button type="primary" size="small" @click="handleDelete(scope.row)">确定</el-button>
                  </div>
                  <span slot="reference" style="margin-left:.10rem">
              <el-button type="text" size="small" style="color:#B94A48">删除
              </el-button>
            </span>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </transition>

    <transition name="el-zoom-in-top">
      <el-form :model="formData"
               :rules="rules"
               ref="formData"
               :class="{cardBackColor:!canEdit}"
               style="text-align: left;padding-top: 28px"
               v-if="showForm" inline>
        <el-row style="padding:0px 12px 24px 12px">
            <el-col :md="8" :lg="6">
              <el-form-item label="业务类型" prop="businessType">
                <ft-enum-select v-model="formData.businessType"
                                service-name="lss-customer"
                                type-name="financingBusinessType"
                                :editing="!canEdit">
                </ft-enum-select>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item v-if="formData.businessType=='BankCredit'" label="金融机构" prop="companyAgency">
                <ft-input :editing="!canEdit" v-model="formData.companyAgency"></ft-input>
              </el-form-item>
              <el-form-item v-else-if="formData.businessType=='Bond'" label="券名" prop="companyAgency">
                <ft-input :editing="!canEdit" v-model="formData.companyAgency"></ft-input>
              </el-form-item>
              <el-form-item v-else-if="formData.businessType=='Trust'" label="信托公司" prop="companyAgency">
                <ft-input :editing="!canEdit" v-model="formData.companyAgency"></ft-input>
              </el-form-item>
              <el-form-item v-else-if="formData.businessType=='FinLease'" label="租赁公司" prop="companyAgency">
                <ft-input :editing="!canEdit" v-model="formData.companyAgency"></ft-input>
              </el-form-item>
              <el-form-item v-else-if="formData.businessType=='EntLoans'" label="委托人" prop="companyAgency">
                <ft-input :editing="!canEdit" v-model="formData.companyAgency"></ft-input>
              </el-form-item>
              <el-form-item v-else-if="formData.businessType=='BankFinancing'" label="理财计划发行银行" prop="companyAgency">
                <ft-input :editing="!canEdit" v-model="formData.companyAgency"></ft-input>
              </el-form-item>
              <el-form-item v-else-if="formData.businessType=='Other'" label="融资提供方" prop="companyAgency">
                <ft-input :editing="!canEdit" v-model="formData.companyAgency"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6" v-if="formData.businessType=='BankCredit'">
              <el-form-item label="授信总额" prop="options.financingAmount">
                <ft-number-input :editable="!canEdit" v-model="formData.options.financingAmount"
                                 :precision='[16,2]'></ft-number-input>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6" v-if="formData.businessType=='BankCredit'">
              <el-form-item label="已出账金额" prop="options.incurredAmount">
                <ft-number-input v-model="formData.options.incurredAmount"
                                 :editable="!canEdit"
                                 :precision='[16,2]'
                                 ></ft-number-input>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6" v-if="formData.businessType=='BankCredit'">
              <el-form-item label="开始日期" prop="startDate">
                <ft-date-picker v-model="formData.startDate"
                                :value-format="format"
                                :editing="!canEdit"></ft-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6" v-if="formData.businessType=='BankCredit'">
              <el-form-item label="截止日期" prop="endDate">
                <ft-date-picker v-model="formData.endDate"
                                :value-format="format"
                                :editing="!canEdit">
                </ft-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6" v-if="formData.businessType=='BankCredit'">
              <el-form-item label="期限" prop="options.financingYears">
                <ft-number-input :editable="!canEdit"
                                 v-model="formData.options.financingYears"
                                 :precision="[2]" >
                </ft-number-input>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6" v-if="formData.businessType=='BankCredit'">
              <el-form-item  label="担保方式" prop="options.guaranteeType">
                <ft-input v-model="formData.options.guaranteeType" :editing="!canEdit"></ft-input>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6" v-if="formData.businessType=='BankCredit'">
              <el-form-item label="分类等级" prop="options.classification">
                <ft-input v-model="formData.options.classification" :editing="!canEdit"></ft-input>
              </el-form-item>
            </el-col>


              <el-col :md="8" :lg="6" v-if="formData.businessType=='Bond'">
                <el-form-item label="主体评级" prop="options.otherType">
                  <ft-input :editing="!canEdit" v-model="formData.options.otherType"></ft-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='Bond'">
                <el-form-item label="发行额" prop="options.financingAmount">
                  <ft-number-input :editable="!canEdit" v-model="formData.options.financingAmount"
                                   :precision='[16,2]'></ft-number-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='Bond'">
                <el-form-item label="起息日" prop="startDate">
                  <ft-date-picker v-model="formData.startDate"
                                  :value-format="format"
                                  :editing="!canEdit"></ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='Bond'">
                <el-form-item label="到期日" prop="endDate">
                  <ft-date-picker v-model="formData.endDate"
                                  :value-format="format"
                                  :editing="!canEdit">
                  </ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='Bond'">
                <el-form-item label="主承销商" prop="options.things">
                  <ft-input type="text" rows="3" v-model="formData.options.things" :editing="!canEdit"></ft-input>
                </el-form-item>
              </el-col>



              <el-col :md="8" :lg="6" v-if="formData.businessType=='Trust'">
                <el-form-item prop="options.normal" label="入股与否">
                  <el-radio v-model="formData.options.normal" :disabled="canEdit" label="是">是</el-radio>
                  <el-radio v-model="formData.options.normal" :disabled="canEdit" label="否">否</el-radio>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='Trust'">
                <el-form-item label="金额" prop="options.financingAmount">
                  <ft-number-input :editable="!canEdit" v-model="formData.options.financingAmount"
                                   :precision='[16,2]'></ft-number-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='Trust'">
                <el-form-item label="起息日" prop="startDate">
                  <ft-date-picker v-model="formData.startDate"
                                  :value-format="format"
                                  :editing="!canEdit"></ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='Trust'">
                <el-form-item label="到期日" prop="endDate">
                  <ft-date-picker v-model="formData.endDate"
                                  :value-format="format"
                                  :editing="!canEdit">
                  </ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="21" v-if="formData.businessType=='Trust'">
                <el-form-item label="股权质押情况" prop="options.stock">
                  <ft-input type="textarea" :autosize='{ minRows: 1, maxRows: 5}' v-model="formData.options.stock"
                            :editing="!canEdit"></ft-input>
                </el-form-item>
              </el-col>


              <el-col :md="8" :lg="6" v-if="formData.businessType=='FinLease'">
                <el-form-item label="租赁类型" prop="options.otherType">
                  <ft-input :editing="!canEdit" v-model="formData.options.otherType"></ft-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='FinLease'">
                <el-form-item label="金额" prop="options.financingAmount">
                  <ft-number-input :editable="!canEdit" v-model="formData.options.financingAmount"
                                   :precision='[16,2]'></ft-number-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='FinLease'">
                <el-form-item label="起息日" prop="startDate">
                  <ft-date-picker v-model="formData.startDate"
                                  :value-format="format"
                                  :editing="!canEdit"></ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='FinLease'">
                <el-form-item label="到期日" prop="endDate">
                  <ft-date-picker v-model="formData.endDate"
                                  :value-format="format"
                                  :editing="!canEdit">
                  </ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='FinLease'">
                <el-form-item label="租赁物" prop="options.leaseThing">
                  <ft-input type="text" rows="3" v-model="formData.options.leaseThing" :editing="!canEdit"></ft-input>
                </el-form-item>
              </el-col>


              <el-col :md="8" :lg="6" v-if="formData.businessType=='EntLoans'">
                <el-form-item label="受托人" prop="options.things">
                  <ft-input :editing="!canEdit" v-model="formData.options.things"></ft-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='EntLoans'">
                <el-form-item label="金额" prop="options.financingAmount">
                  <ft-number-input :editable="!canEdit" v-model="formData.options.financingAmount"
                                   :precision='[16,2]'></ft-number-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='EntLoans'">
                <el-form-item label="起息日" prop="startDate">
                  <ft-date-picker v-model="formData.startDate"
                                  :value-format="format"
                                  :editing="!canEdit"></ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='EntLoans'">
                <el-form-item label="到期日" prop="endDate">
                  <ft-date-picker v-model="formData.endDate"
                                  :value-format="format"
                                  :editing="!canEdit">
                  </ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="24" v-if="formData.businessType=='EntLoans'">
                <el-form-item label="备注" prop="remark">
                  <ft-input type="textarea" :autosize='{ minRows: 1, maxRows: 5}' v-model="formData.remark"
                            :editing="!canEdit"></ft-input>
                </el-form-item>
              </el-col>


              <el-col :md="8" :lg="6" v-if="formData.businessType=='BankFinancing'">
                <el-form-item label="理财类型" prop="otherType">
                  <ft-enum-select v-model="formData.options.otherType"
                                  service-name="lss-customer"
                                  type-name="financialType"
                                  :editing="!canEdit"
                  ></ft-enum-select>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='BankFinancing'">
                <el-form-item label="金额" prop="options.financingAmount">
                  <ft-number-input :editable="!canEdit" v-model="formData.options.financingAmount"
                                   :precision='[16,2]'></ft-number-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='BankFinancing'">
                <el-form-item label="起息日" prop="startDate">
                  <ft-date-picker v-model="formData.startDate"
                                  :value-format="format"
                                  :editing="!canEdit"></ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='BankFinancing'">
                <el-form-item label="到期日" prop="endDate">
                  <ft-date-picker v-model="formData.endDate"
                                  :value-format="format"
                                  :editing="!canEdit">
                  </ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="24" v-if="formData.businessType=='BankFinancing'">
                <el-form-item label="备注" prop="remark">
                  <ft-input type="textarea" :autosize='{ minRows: 1, maxRows: 5}' v-model="formData.remark"
                            :editing="!canEdit"></ft-input>
                </el-form-item>
              </el-col>


              <el-col :md="8" :lg="6" v-if="formData.businessType=='Other'">
                <el-form-item label="具体模式" prop="options.otherType">
                  <ft-input :editing="!canEdit" v-model="formData.options.otherType"></ft-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='Other'">
                <el-form-item label="金额" prop="options.financingAmount">
                  <ft-number-input :editable="!canEdit" v-model="formData.options.financingAmount"
                                   :precision='[16,2]'></ft-number-input>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='Other'">
                <el-form-item label="起息日" prop="startDate">
                  <ft-date-picker v-model="formData.startDate"
                                  :value-format="format"
                                  :editing="!canEdit"></ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="6" v-if="formData.businessType=='Other'">
                <el-form-item label="到期日" prop="endDate">
                  <ft-date-picker v-model="formData.endDate"
                                  :value-format="format"
                                  :editing="!canEdit">
                  </ft-date-picker>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="24" v-if="formData.businessType=='Other'">
                <el-form-item label="备注" prop="remark">
                  <ft-input type="textarea" :autosize='{ minRows: 1, maxRows: 5}' v-model="formData.remark"
                            :editing="!canEdit"></ft-input>
                </el-form-item>
              </el-col>
          </el-row>
        <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>
        <el-row style="padding:16px 0px">
          <el-col align="right" v-show="!canEdit">
            <el-button size="mini"
                       @click="handleCancel()">取消
            </el-button>
            <el-button size="mini"
                       type="primary"
                       @click="handleSave()"
                       style="margin-left: 24px;margin-right: 36px">保存
            </el-button>
          </el-col>
          <el-col align="right" v-show="canEdit">
            <el-button size="mini"
                       style="margin-left: 24px;margin-right: 36px"
                       @click="handleCancel()">返回
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </transition>
  </div>
</template>

<script>
  import FtInput from '../ft/FtInput'
  import FtDatePicker from '../ft/FtDatePicker'

  export default {
    name: 'FinancingInfo',
    components: {FtInput, FtDatePicker},
    props: {
      customerId: {
        type : String,
        default : '',
      },
      editable: {
        type : Boolean,
        default : true,
      },
    },
    mounted() {
      this.loadData()
    },
    data() {
      let yearsValidate =(rule,value,callback)=>{
        let regular = /^[+]{0,1}(\d+)$/
        if (value && !regular.test(value)) {
          callback(new Error('输入正确的年限'));
        } else {
          callback();
        }
      }
      let amountValidate =(rule,value,callback)=>{
        if (value && value>this.formData.options.financingAmount) {
          callback(new Error('输入正确的金额'));
        } else {
          callback();
        }
      }

      let dateValidate =(rule,value,callback)=>{
        if (value && value < this.formData.startDate) {
          callback(new Error('输入正确的日期'));
        } else {
          callback();
        }
      }
      return {
        showAddButton: true,
        format: 'yyyy-MM-dd',
        BankCreditData: [],
        BondData: [],
        TrustData: [],
        FinLeaseData: [],
        EntLoansData: [],
        BankFinancingData: [],
        OtherData: [],
        showBankCredit: true,
        showBond: true,
        showTrust: true,
        showFinLease: true,
        showEntLoans: true,
        showBankFinancing: true,
        canEdit: false,
        tabName: '',
        formData: {
          options: {
            //融资金额
            financingAmount: null,
            //已出账金额
            incurredAmount: null,
            //关系期限
            financingYears: null,
            //担保方式
            guaranteeType: null,
            //租赁类型，具体模式，理财类型，主体评级
            otherType:null,
            //分类等级
            classification: null,
            //是否正常
            normal: null,
            //受托人，主承销商
            things: null,
            //租赁物
            leaseThing:null
          }
        },
        showForm: false,
        rules: {
          companyAgency: [
            {required: true, message: '必填字段', trigger: 'blur'},
            {max: 80, message: "不能超过80字符", trigger: 'blur'}],
          "options.classification": [
            {required: true, message: '必填字段', trigger: 'blur'},
            {max: 10, message: "不能超过10字符", trigger: 'blur'}],
          "options.guaranteeType": [
            {required: true, message: '必填字段', trigger: 'blur'},
            {max: 20, message: "不能超过20字符", trigger: 'blur'}],
          "options.otherType": [
            {required: true, message: '必填字段', trigger: 'blur'},
            {max: 80, message: "不能超过80字符", trigger: 'blur'}],
          "options.financingYears": [
            {required: true, message: '必填字段', trigger: 'blur'},
            {validator:yearsValidate, trigger: 'blur'}],
          remark: [
            {max: 200, message: "不能超过200字符", trigger: 'blur'}],
          "options.stock": [
            {max: 80, message: "不能超过80字符", trigger: 'blur'}],
          "options.things": [
            {required: true, message: '必填字段', trigger: 'blur'},
            {max: 80, message: "不能超过80字符", trigger: 'blur'}
          ],
          "options.leaseThing": [
            {required: true, message: '必填字段', trigger: 'blur'},
            {max: 100, message: "不能超过100字符", trigger: 'blur'}
          ],
          "options.financingAmount": [
            {required: true, message: '必填字段', trigger: 'blur'}
          ],
          //已出账金额
          "options.incurredAmount": [
            {required: true, message: '输入正确金额', trigger: 'blur'},
            {validator:amountValidate, trigger: 'blur'}],
          "options.normal": [
            {required: true, message: '必填字段', trigger: 'blur'}
          ],
          startDate: [
            {required: true, message: '必填字段', trigger: 'blur'}
          ],
          endDate: [
            {required: true, message: '必填字段', trigger: 'blur'},
            {validator:dateValidate, trigger: 'blur'}],
        }
      }
    },
    methods: {
      handleClick(tab, event) {
        this.tabName = tab.name
      },
      addRow() {
        this.formData = {
          customerId: this.customerId,
          options: {
            financingAmount: null,
            incurredAmount: null,
            financingYears: null,
            guaranteeType: null,
            classification: null
          },
          businessType: 'BankCredit'
        };
        this.showForm = true;
        this.canEdit = false
      },
      //列表编辑按钮
      handleEdit(index, row) {
        this.formData = JSON.parse(JSON.stringify(row));
        this.canEdit = false;
        this.showForm = true
      },
      //列表删除按钮
      handleDelete(val) {
        this.$http.delete('/joys-rest/lss-customer/financing/' + val.financingInfoId).then(
          resp => {
            this.$message.success('删除成功!');
            this.canEdit = true;
            this.loadData()
          },
          resp => {
            this.$message.error(resp.body)
          })
      },
      //列表取消
      handleCancel() {
        this.showForm = false;
        this.canEdit = true
      },
      loadData() {
        this.loadOther();
        this.loadBankFinancing();
        this.loadEntLoans();
        this.loadFinLease();
        this.loadTrust()
        this.loadBond();
        this.loadBankCredit();
      },
      //银行授信
      loadBankCredit() {
        this.$http.get('/joys-rest/lss-customer/financing/', {
          params: {
            customerId: this.customerId,
            businessType: 'BankCredit',
          }
        }).then(resp => {
          this.BankCreditData = resp.body.rows;
          if (resp.body.total) {
            this.tabName = 'first';
            this.showForm=false
            this.showAddButton = false
          }
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      //未到期债券
      loadBond() {
        this.$http.get('/joys-rest/lss-customer/financing/', {
          params: {
            customerId: this.customerId,
            businessType: 'Bond',
          }
        }).then(
          resp => {
            this.BondData = resp.body.rows;
            if (resp.body.total) {
              this.tabName = 'second';
              this.showForm=false
              this.showAddButton = false
            }
          },
          resp => {
            this.$message.error(resp.body.message)
          })
      },
      //信托融资
      loadTrust() {
        this.$http.get('/joys-rest/lss-customer/financing/', {
          params: {
            customerId: this.customerId,
            businessType: 'Trust',
          }
        }).then(resp => {
          this.TrustData = resp.body.rows;
          if (resp.body.total) {
            this.tabName = 'third';
            this.showForm=false
            this.showAddButton = false
            this.formData.options.stock = resp.body.rows[0].remark
          }
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      //融资租赁
      loadFinLease() {
        this.$http.get('/joys-rest/lss-customer/financing/', {
          params: {
            customerId: this.customerId,
            businessType: 'FinLease',
          }
        }).then(resp => {
          this.showForm=false
          this.FinLeaseData = resp.body.rows
          if (resp.body.total) {
            this.showForm=false
            this.tabName = 'fourth';
            this.showAddButton = false
          }
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      //委托贷款
      loadEntLoans() {
        this.$http.get('/joys-rest/lss-customer/financing/', {
          params: {
            customerId: this.customerId,
            businessType: 'EntLoans',
          }
        }).then(resp => {
          this.EntLoansData = resp.body.rows;
          if (resp.body.total) {
            this.showForm=false
            this.tabName = 'fifth';
            this.showAddButton = false
          }
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      //银行理财融资
      loadBankFinancing() {
        this.$http.get('/joys-rest/lss-customer/financing/', {
          params: {
            customerId: this.customerId,
            businessType: 'BankFinancing',
          }
        }).then(resp => {
          this.BankFinancingData = resp.body.rows;
          if (resp.body.total) {
            this.showForm=false
            this.tabName = 'sixth';
            this.showAddButton = false
          }
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      //其他融资方式
      loadOther() {
        this.$http.get('/joys-rest/lss-customer/financing/', {
          params: {
            customerId: this.customerId,
            businessType: 'Other',
          }
        }).then(resp => {
          this.OtherData = resp.body.rows;
          if (resp.body.total) {
            this.tabName = 'seventh';
            this.showAddButton = false
          }
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      handleSave() {
        this.$refs.formData.validate((valid) => {
          this.formData.remark = this.formData.options.stock
          if (valid) {
            this.$http.put('/joys-rest/lss-customer/financing/', this.formData).then(
              resp => {
                this.$message.success("保存成功");
                this.showForm = false;
                if (this.formData.businessType == 'BankCredit') {
                  this.loadBankCredit()
                } else if (this.formData.businessType == 'Bond') {
                  this.loadBond()
                } else if (this.formData.businessType == 'Trust') {
                  this.loadTrust()
                } else if (this.formData.businessType == 'FinLease') {
                  this.loadFinLease()
                } else if (this.formData.businessType == 'EntLoans') {
                  this.loadEntLoans()
                } else if (this.formData.businessType == 'BankFinancing') {
                  this.loadBankFinancing()
                } else if (this.formData.businessType == 'Other') {
                  this.loadOther()
                }
              },
              resp => {
                this.$message.error(resp.body.message)
              })
          } else {
            return false
          }
        })
      },
      //列表卡片按钮
      handleCard(index, row) {
        this.formData = row;
        this.canEdit = true;
        this.showForm = true
      },
      //字数较多时，超出部分用...显示
      convertInputValue(val) {
        if (null != val && '' != val && val.length > 9) {
          return val.substr(0, 9) + '...'
        }
        return val
      }
    }
  }
</script>
<style scoped>
</style>
